<template>
    <el-card shadow="never" >
        <div class="mine-main-container">
            <div class="exchange-container">
                <el-input type="primary" size="large" class="exchange-input" autocomplete="off" placeholder="请输入优惠券兑换码"></el-input>
                <el-button type="primary" size="small" class="coupon-button" style="font-size: 14px;">兑换</el-button>
                <div class="right-container">
                    <div class="link-button">
                        <el-icon><HelpFilled /></el-icon>
                        领券中心
                    </div>
                    <div class="link-button">
                        <el-icon><Promotion /></el-icon>
                        历史优惠券
                    </div>
                </div>
                <div class="coupon-tips">* 优惠券仅用于线下课</div>
                <div>
                    <el-empty description="您的优惠券已使用完" />
                </div>

                
            </div>
        </div>
    </el-card>
    
</template>

<script>
export default {
    name: "Coupons",
}
</script>

<style scoped lang="less">
    .mine-main-container{
        .coupon-tips{
            margin-top: 20px;
            font-size: 14px;
            color: #dba059;
        }
        .exchange-input{
            width: 480px;
            height: 40px;
            :deep(.el-input__wrapper) {
            // box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
            background-color:#f5f7f9;
            cursor: default;
                }
            --el-input-focus-border-color: red;

        }
        .coupon-button{
            width: 100px;
            height: 40px;
            margin-left: 11px;
        }
        .el-button--primary {
            color: #fff;
            background-color: #f93684;
            border-color: #f93684;
            }

        .right-container{
            float: right;
            width: auto;
            padding: 7px 0;
            .link-button{
                font-size: 14px;
                color: #111;
                display:inline-block;
                margin-left: 42px;
                cursor: pointer;
            }
        }
        
        




    }
</style>